<template>
  <div class="h-full flex bg-gray-50">
    <!-- 左侧导航 -->
    <div class="w-64 bg-white border-r border-gray-200 flex-shrink-0 overflow-y-auto">
      <div class="p-4 border-b border-gray-200">
        <h2 class="text-lg font-semibold text-gray-800 mb-3">使用文档</h2>
        <el-input
          v-model="searchKeyword"
          placeholder="搜索文档..."
          size="small"
          prefix-icon="el-icon-search"
          clearable
        ></el-input>
      </div>

      <div class="py-2">
        <div
          v-for="section in filteredSections"
          :key="section.id"
          class="mb-1"
        >
          <div
            class="px-4 py-2 flex items-center justify-between cursor-pointer hover:bg-gray-50 transition-colors"
            :class="{ 'bg-blue-50 text-blue-600': activeSection === section.id }"
            @click="toggleSection(section.id)"
          >
            <div class="flex items-center">
              <i :class="section.icon" class="mr-2"></i>
              <span class="text-sm font-medium">{{ section.title }}</span>
            </div>
            <i
              v-if="section.children"
              class="el-icon-arrow-right text-xs transition-transform"
              :class="{ 'transform rotate-90': expandedSections.includes(section.id) }"
            ></i>
          </div>

          <!-- 子项 -->
          <div v-if="section.children && expandedSections.includes(section.id)" class="bg-gray-50">
            <div
              v-for="child in section.children"
              :key="child.id"
              class="pl-10 pr-4 py-2 text-sm cursor-pointer hover:bg-gray-100 transition-colors"
              :class="{ 'bg-blue-100 text-blue-700 font-medium': activeSection === child.id }"
              @click.stop="selectSection(child.id)"
            >
              {{ child.title }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧内容 -->
    <div class="flex-1 overflow-y-auto">
      <div class="max-w-4xl mx-auto p-8">
        <!-- 快速入门 -->
        <div v-if="activeSection === 'getting-started'" class="doc-content">
          <h1 class="doc-title">快速入门</h1>

          <div class="doc-section">
            <h2 class="doc-subtitle">1. 安装 Delve 调试器</h2>
            <p>本工具依赖 Delve (dlv) 调试器。请先安装：</p>
            <div class="doc-code">
              <pre>go install github.com/go-delve/delve/cmd/dlv@latest</pre>
            </div>
            <div class="doc-tip">
              <i class="el-icon-info"></i>
              <span>安装后确保 <code>$GOPATH/bin</code> 已添加到系统 PATH 环境变量中</span>
            </div>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">2. 编译 Go 程序</h2>
            <p>为了获得最佳调试体验，请使用以下命令编译程序（禁用优化）：</p>
            <div class="doc-code">
              <pre>go build -gcflags "all=-N -l" -o myapp.exe myapp.go</pre>
            </div>
            <ul class="doc-list">
              <li><code>-N</code> 禁用优化</li>
              <li><code>-l</code> 禁用内联</li>
              <li>这样可以避免变量被优化掉，确保断点能正常工作</li>
            </ul>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">3. 开始调试</h2>
            <ol class="doc-list">
              <li>点击"选择程序"按钮，选择编译好的可执行文件</li>
              <li>在"断点"面板中添加断点（指定文件路径和行号）</li>
              <li>点击"启动调试"按钮（或按 F5）</li>
              <li>程序会在断点处暂停，此时可以查看变量、调用堆栈等信息</li>
              <li>使用调试控制按钮继续执行或单步调试</li>
            </ol>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">4. 快捷键</h2>
            <table class="doc-table">
              <thead>
                <tr>
                  <th>快捷键</th>
                  <th>功能</th>
                  <th>说明</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><kbd>F5</kbd></td>
                  <td>继续执行</td>
                  <td>程序继续运行直到下一个断点</td>
                </tr>
                <tr>
                  <td><kbd>F10</kbd></td>
                  <td>单步跳过</td>
                  <td>执行当前行，不进入函数内部</td>
                </tr>
                <tr>
                  <td><kbd>F11</kbd></td>
                  <td>单步进入</td>
                  <td>进入函数内部逐行执行</td>
                </tr>
                <tr>
                  <td><kbd>Shift+F11</kbd></td>
                  <td>单步跳出</td>
                  <td>执行完当前函数并返回</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <!-- 断点功能 -->
        <div v-if="activeSection === 'breakpoints-basic'" class="doc-content">
          <h1 class="doc-title">断点管理</h1>

          <div class="doc-section">
            <h2 class="doc-subtitle">添加断点</h2>
            <ol class="doc-list">
              <li>在"断点"面板点击"添加断点"按钮</li>
              <li>选择或输入源文件路径</li>
              <li>输入行号</li>
              <li>点击"确定"</li>
            </ol>
            <div class="doc-tip">
              <i class="el-icon-info"></i>
              <span>文件路径必须是绝对路径，且与编译时的路径一致</span>
            </div>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">启用/禁用断点</h2>
            <p>点击断点列表中的复选框可以临时禁用断点，而不删除它。禁用的断点不会触发暂停。</p>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">删除断点</h2>
            <p>悬停在断点上，点击右侧的删除按钮（垃圾桶图标）即可删除断点。</p>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">批量操作</h2>
            <ul class="doc-list">
              <li><strong>全选</strong>：勾选顶部的"全选"复选框</li>
              <li><strong>批量启用/禁用</strong>：选中断点后，点击"批量操作"下拉菜单</li>
              <li><strong>批量删除</strong>：选中断点后，在"批量操作"中选择"删除选中"</li>
            </ul>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">导入/导出</h2>
            <p>在"更多"菜单中可以导出和导入断点配置（JSON 格式）：</p>
            <ul class="doc-list">
              <li><strong>导出</strong>：保存当前所有断点到 JSON 文件</li>
              <li><strong>导入</strong>：从 JSON 文件加载断点，自动去重</li>
            </ul>
          </div>
        </div>

        <!-- 条件断点 -->
        <div v-if="activeSection === 'breakpoints-conditional'" class="doc-content">
          <h1 class="doc-title">条件断点</h1>

          <div class="doc-section">
            <h2 class="doc-subtitle">什么是条件断点？</h2>
            <p>条件断点只在指定条件为 true 时才会暂停程序，可以避免在不关心的情况下频繁停止。</p>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">设置条件</h2>
            <p>在添加或编辑断点时，在"条件"字段输入 Go 表达式：</p>
            <div class="doc-code">
              <pre>i > 100
err != nil
user.Name == "admin"
len(slice) > 0</pre>
            </div>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">支持的表达式</h2>
            <ul class="doc-list">
              <li>比较运算：<code>==</code>, <code>!=</code>, <code>&gt;</code>, <code>&lt;</code>, <code>&gt;=</code>, <code>&lt;=</code></li>
              <li>逻辑运算：<code>&&</code>, <code>||</code>, <code>!</code></li>
              <li>函数调用：<code>len()</code>, <code>cap()</code></li>
              <li>字段访问：<code>user.Name</code>, <code>user.Profile.Age</code></li>
            </ul>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">识别条件断点</h2>
            <p>条件断点在列表中用旗帜图标（🚩）标识，并显示条件表达式。</p>
          </div>
        </div>

        <!-- 命中次数断点 -->
        <div v-if="activeSection === 'breakpoints-hit'" class="doc-content">
          <h1 class="doc-title">命中次数断点</h1>

          <div class="doc-section">
            <h2 class="doc-subtitle">什么是命中次数断点？</h2>
            <p>命中次数断点可以设置在断点被触发指定次数后才暂停，适用于循环调试。</p>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">支持的模式</h2>
            <table class="doc-table">
              <thead>
                <tr>
                  <th>模式</th>
                  <th>说明</th>
                  <th>示例</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>等于 (==)</td>
                  <td>第 N 次命中时暂停</td>
                  <td>== 5（第5次）</td>
                </tr>
                <tr>
                  <td>大于 (&gt;)</td>
                  <td>命中次数大于 N 时暂停</td>
                  <td>&gt; 10（第11次及以后）</td>
                </tr>
                <tr>
                  <td>大于等于 (&gt;=)</td>
                  <td>命中次数大于等于 N 时暂停</td>
                  <td>&gt;= 5（第5次及以后）</td>
                </tr>
                <tr>
                  <td>小于 (&lt;)</td>
                  <td>命中次数小于 N 时暂停</td>
                  <td>&lt; 10（前9次）</td>
                </tr>
                <tr>
                  <td>整除 (%)</td>
                  <td>每 N 次命中时暂停一次</td>
                  <td>% 10（每10次）</td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">使用场景</h2>
            <ul class="doc-list">
              <li><strong>循环调试</strong>：在大循环中只在特定迭代暂停</li>
              <li><strong>性能分析</strong>：每隔一定次数采样一次</li>
              <li><strong>间歇性问题</strong>：捕获偶发错误</li>
            </ul>
          </div>
        </div>

        <!-- 变量监视 -->
        <div v-if="activeSection === 'variables'" class="doc-content">
          <h1 class="doc-title">变量监视</h1>

          <div class="doc-section">
            <h2 class="doc-subtitle">查看局部变量</h2>
            <p>在"变量"面板中可以查看当前作用域的所有局部变量：</p>
            <ul class="doc-list">
              <li>基本类型直接显示值</li>
              <li>复杂类型（结构体、切片、Map）可以展开查看</li>
              <li>点击变量名左侧的箭头展开/收起子成员</li>
            </ul>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">Watch 表达式</h2>
            <p>在"Watch"面板可以添加自定义表达式监视：</p>
            <ol class="doc-list">
              <li>切换到"Watch"标签页</li>
              <li>点击"添加"按钮</li>
              <li>输入表达式（如 <code>user.Name</code>、<code>len(items)</code>）</li>
              <li>表达式会在每次暂停时自动求值</li>
            </ol>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">修改变量值</h2>
            <p>双击可编辑的变量值可以进入编辑模式：</p>
            <ul class="doc-list">
              <li>支持修改基本类型：bool、int、float</li>
              <li>按 <kbd>Enter</kbd> 保存，<kbd>Esc</kbd> 取消</li>
              <li>修改成功后会有绿色高亮反馈</li>
            </ul>
            <div class="doc-warning">
              <i class="el-icon-warning"></i>
              <span>String 类型修改支持有限（dlv 限制），复杂类型暂不支持</span>
            </div>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">变量加载深度配置</h2>
            <p>在"设置"页面可以配置变量树的加载深度：</p>
            <ul class="doc-list">
              <li>默认深度：3 层</li>
              <li>推荐范围：3-5 层</li>
              <li>深度越大，显示越详细，但可能影响性能</li>
            </ul>
          </div>
        </div>

        <!-- Goroutine -->
        <div v-if="activeSection === 'goroutines'" class="doc-content">
          <h1 class="doc-title">Goroutine 调试</h1>

          <div class="doc-section">
            <h2 class="doc-subtitle">查看 Goroutine 列表</h2>
            <p>在"Goroutine"标签页可以看到所有活跃的 Goroutine：</p>
            <ul class="doc-list">
              <li><strong>ID</strong>：Goroutine 唯一标识</li>
              <li><strong>状态</strong>：运行中、等待中、系统调用、空闲、已停止、已结束</li>
              <li><strong>当前位置</strong>：文件、行号、函数名</li>
              <li><strong>入口函数</strong>：Goroutine 的起始函数</li>
              <li><strong>等待原因</strong>：如 channel 阻塞、互斥锁等</li>
            </ul>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">状态筛选</h2>
            <p>使用顶部的筛选按钮可以按状态过滤 Goroutine：</p>
            <ul class="doc-list">
              <li><span class="status-badge status-running">运行中</span>：正在执行的 Goroutine</li>
              <li><span class="status-badge status-waiting">等待中</span>：被阻塞等待资源</li>
              <li><span class="status-badge status-syscall">系统调用</span>：执行系统调用</li>
              <li><span class="status-badge status-idle">空闲</span>：暂时没有任务</li>
              <li><span class="status-badge status-stopped">已停止</span>：调试器暂停</li>
            </ul>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">切换 Goroutine</h2>
            <p>点击任意 Goroutine 可以切换查看其独立的调用堆栈和局部变量。</p>
          </div>
        </div>

        <!-- 调用堆栈 -->
        <div v-if="activeSection === 'callstack'" class="doc-content">
          <h1 class="doc-title">调用堆栈</h1>

          <div class="doc-section">
            <h2 class="doc-subtitle">查看调用链</h2>
            <p>在"调用堆栈"面板可以看到当前执行的函数调用链：</p>
            <ul class="doc-list">
              <li>最上方是当前执行位置</li>
              <li>往下是调用者</li>
              <li>显示函数名、文件名、行号</li>
            </ul>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">堆栈帧</h2>
            <p>每个堆栈帧包含：</p>
            <ul class="doc-list">
              <li><strong>函数名</strong>：完整的函数签名</li>
              <li><strong>位置</strong>：文件路径和行号</li>
              <li><strong>深度</strong>：从 0 开始，0 是当前位置</li>
            </ul>
          </div>
        </div>

        <!-- 历史记录 -->
        <div v-if="activeSection === 'history'" class="doc-content">
          <h1 class="doc-title">历史记录</h1>

          <div class="doc-section">
            <h2 class="doc-subtitle">自动保存</h2>
            <p>每次启动调试时，程序路径和断点配置会自动保存到历史记录中。</p>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">快速访问</h2>
            <p>在"历史"页面可以：</p>
            <ul class="doc-list">
              <li>查看最近调试的程序（最多 20 条）</li>
              <li>点击卡片加载程序和断点配置</li>
              <li>点击"调试"按钮直接启动调试</li>
              <li>查看每个程序的断点列表</li>
              <li>移除单个历史记录</li>
              <li>清空所有历史记录</li>
            </ul>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">自动去重</h2>
            <p>重复的程序会自动去重，只保留最新的调试记录，并更新时间戳。</p>
          </div>
        </div>

        <!-- 常见问题 -->
        <div v-if="activeSection === 'faq'" class="doc-content">
          <h1 class="doc-title">常见问题</h1>

          <div class="doc-section">
            <h3 class="doc-question">Q: 断点不生效怎么办？</h3>
            <div class="doc-answer">
              <p>可能的原因和解决方案：</p>
              <ol class="doc-list">
                <li><strong>编译时未禁用优化</strong>
                  <div class="doc-code"><pre>go build -gcflags "all=-N -l" -o myapp.exe myapp.go</pre></div>
                </li>
                <li><strong>文件路径不匹配</strong>：使用绝对路径，且必须与编译时的路径一致</li>
                <li><strong>行号不正确</strong>：确保行号对应的是可执行代码，不是空行或注释</li>
                <li><strong>断点被禁用</strong>：检查断点列表中的复选框是否勾选</li>
              </ol>
            </div>
          </div>

          <div class="doc-section">
            <h3 class="doc-question">Q: 变量显示为 "optimized out" 怎么办？</h3>
            <div class="doc-answer">
              <p>这是因为编译时启用了优化，变量被优化掉了。解决方案：</p>
              <div class="doc-code"><pre>go build -gcflags "all=-N -l" -o myapp.exe myapp.go</pre></div>
              <p>使用 <code>-N</code> 禁用优化，<code>-l</code> 禁用内联。</p>
            </div>
          </div>

          <div class="doc-section">
            <h3 class="doc-question">Q: 如何调试大循环中的特定迭代？</h3>
            <div class="doc-answer">
              <p>使用命中次数断点或条件断点：</p>
              <ul class="doc-list">
                <li><strong>方法 1</strong>：设置命中次数断点，例如 "== 100" 只在第 100 次迭代暂停</li>
                <li><strong>方法 2</strong>：设置条件断点，例如 "i == 100" 只在 i 等于 100 时暂停</li>
              </ul>
            </div>
          </div>

          <div class="doc-section">
            <h3 class="doc-question">Q: dlv 进程端口被占用怎么办？</h3>
            <div class="doc-answer">
              <p>调试器会自动寻找可用端口（2345-2400）。如果所有端口都被占用，请：</p>
              <ol class="doc-list">
                <li>关闭其他正在运行的 dlv 进程</li>
                <li>或者重启应用程序</li>
              </ol>
            </div>
          </div>

          <div class="doc-section">
            <h3 class="doc-question">Q: 程序执行完成后无法重新启动调试？</h3>
            <div class="doc-answer">
              <p>这个问题已经修复。现在程序退出后会自动清理资源，可以直接重新启动调试。</p>
            </div>
          </div>

          <div class="doc-section">
            <h3 class="doc-question">Q: 如何查看深层嵌套的变量？</h3>
            <div class="doc-answer">
              <p>在"设置"页面可以配置变量加载深度（1-10 层）：</p>
              <ul class="doc-list">
                <li>默认深度：3 层</li>
                <li>建议：3-5 层可以平衡性能和可见性</li>
                <li>深度过大可能导致断点暂停时响应较慢</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 调试技巧 -->
        <div v-if="activeSection === 'tips'" class="doc-content">
          <h1 class="doc-title">调试技巧</h1>

          <div class="doc-section">
            <h2 class="doc-subtitle">技巧 1：组合使用条件断点和命中次数</h2>
            <p>可以同时设置条件和命中次数，实现更精确的断点控制。</p>
            <div class="doc-example">
              <strong>场景</strong>：在循环中只在特定条件且是偶数次迭代时暂停
              <ul>
                <li>条件：<code>err != nil</code></li>
                <li>命中次数：<code>% 2 == 0</code>（每 2 次）</li>
              </ul>
            </div>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">技巧 2：使用 Watch 表达式监控关键指标</h2>
            <p>添加以下表达式到 Watch 面板：</p>
            <ul class="doc-list">
              <li><code>len(items)</code> - 监控切片长度变化</li>
              <li><code>cap(items)</code> - 监控切片容量</li>
              <li><code>user.Status</code> - 监控状态变化</li>
            </ul>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">技巧 3：批量管理断点</h2>
            <p>使用批量操作功能提高效率：</p>
            <ul class="doc-list">
              <li>调试前禁用不需要的断点，而不是删除它们</li>
              <li>导出断点配置，在团队中共享</li>
              <li>为不同的调试场景创建多个断点配置文件</li>
            </ul>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">技巧 4：利用历史记录</h2>
            <p>历史记录会保存断点配置：</p>
            <ul class="doc-list">
              <li>下次调试同一程序时，断点会自动恢复</li>
              <li>可以快速切换到之前调试过的程序</li>
              <li>查看历史记录中保存的断点列表</li>
            </ul>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">技巧 5：Goroutine 调试</h2>
            <p>调试并发程序时：</p>
            <ul class="doc-list">
              <li>使用状态筛选快速定位"等待中"的 Goroutine</li>
              <li>查看等待原因，识别 channel 阻塞或死锁</li>
              <li>切换 Goroutine 查看不同协程的堆栈</li>
            </ul>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">技巧 6：日志过滤</h2>
            <p>输出日志过多时：</p>
            <ul class="doc-list">
              <li>使用类型过滤按钮只看特定类型（Error、Stderr 等）</li>
              <li>使用搜索框快速定位关键词</li>
              <li>搜索结果会高亮显示</li>
            </ul>
          </div>
        </div>

        <!-- 故障排除 -->
        <div v-if="activeSection === 'troubleshooting'" class="doc-content">
          <h1 class="doc-title">故障排除</h1>

          <div class="doc-section">
            <h2 class="doc-subtitle">dlv 未找到</h2>
            <div class="doc-problem">
              <strong>问题</strong>：启动调试时提示 "dlv command not found"
            </div>
            <div class="doc-solution">
              <strong>解决方案</strong>：
              <ol class="doc-list">
                <li>确认已安装 dlv：
                  <div class="doc-code"><pre>dlv version</pre></div>
                </li>
                <li>如果未安装，执行：
                  <div class="doc-code"><pre>go install github.com/go-delve/delve/cmd/dlv@latest</pre></div>
                </li>
                <li>确保 <code>$GOPATH/bin</code> 在 PATH 中</li>
              </ol>
            </div>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">端口冲突</h2>
            <div class="doc-problem">
              <strong>问题</strong>：多次启动调试失败，提示端口被占用
            </div>
            <div class="doc-solution">
              <strong>解决方案</strong>：
              <ol class="doc-list">
                <li>调试器会自动寻找可用端口（2345-2400）</li>
                <li>如果仍然失败，手动关闭其他 dlv 进程：
                  <div class="doc-code"><pre># Windows
taskkill /F /IM dlv.exe

# Linux/Mac
killall dlv</pre></div>
                </li>
              </ol>
            </div>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">调试器无响应</h2>
            <div class="doc-problem">
              <strong>问题</strong>：调试器启动后界面卡住
            </div>
            <div class="doc-solution">
              <strong>解决方案</strong>：
              <ol class="doc-list">
                <li>检查程序是否在等待输入</li>
                <li>查看输出日志面板是否有错误信息</li>
                <li>尝试点击"停止"按钮，然后重新启动</li>
                <li>如果仍然无响应，重启应用程序</li>
              </ol>
            </div>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">变量值异常</h2>
            <div class="doc-problem">
              <strong>问题</strong>：变量显示的值与预期不符
            </div>
            <div class="doc-solution">
              <strong>解决方案</strong>：
              <ol class="doc-list">
                <li>确认断点位置正确（在变量赋值之后）</li>
                <li>检查是否选择了正确的 Goroutine</li>
                <li>确认编译时禁用了优化 <code>-gcflags "all=-N -l"</code></li>
                <li>刷新变量面板（点击刷新按钮）</li>
              </ol>
            </div>
          </div>
        </div>

        <!-- 关于 -->
        <div v-if="activeSection === 'about'" class="doc-content">
          <h1 class="doc-title">关于</h1>

          <div class="doc-section">
            <h2 class="doc-subtitle">Go 调试工具</h2>
            <p>这是一个基于 Electron 和 Vue 2 构建的 Go 语言可视化调试工具，集成了 Delve 调试器。</p>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">主要特性</h2>
            <ul class="doc-list">
              <li>✅ 断点管理（普通、条件、命中次数）</li>
              <li>✅ 变量监视和修改</li>
              <li>✅ Watch 表达式</li>
              <li>✅ Goroutine 调试和切换</li>
              <li>✅ 调用堆栈查看</li>
              <li>✅ 批量断点操作</li>
              <li>✅ 断点导入/导出</li>
              <li>✅ 调试历史记录</li>
              <li>✅ 日志过滤和搜索</li>
              <li>✅ 快捷键支持</li>
            </ul>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">技术栈</h2>
            <ul class="doc-list">
              <li>前端：Vue 2.7.14 + Element UI 2.15.14</li>
              <li>构建：Vite 5.x</li>
              <li>桌面：Electron 28.x</li>
              <li>调试引擎：Delve (dlv)</li>
            </ul>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">版本信息</h2>
            <p><strong>当前版本</strong>：v1.3</p>
            <p><strong>最后更新</strong>：2025-10-17</p>
          </div>

          <div class="doc-section">
            <h2 class="doc-subtitle">反馈与支持</h2>
            <p>如果您遇到问题或有功能建议，欢迎通过以下方式反馈：</p>
            <ul class="doc-list">
              <li>
                <strong>Gitee Issues</strong>：功能建议、Bug 报告
                <br>
                <a href="https://gitee.com/Gulu_Lv/go-dlv-tool/issues" target="_blank" class="text-blue-600 hover:text-blue-800 text-sm">
                  https://gitee.com/Gulu_Lv/go-dlv-tool/issues
                </a>
              </li>
              <li>
                <strong>Gitee 仓库</strong>：查看源代码、提交 Pull Request
                <br>
                <a href="https://gitee.com/Gulu_Lv/go-dlv-tool" target="_blank" class="text-blue-600 hover:text-blue-800 text-sm">
                  https://gitee.com/Gulu_Lv/go-dlv-tool
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DocsView',
  data() {
    return {
      activeSection: 'getting-started',
      expandedSections: ['getting-started-group', 'breakpoints-group'],
      searchKeyword: '',
      sections: [
        {
          id: 'getting-started-group',
          title: '快速入门',
          icon: 'el-icon-s-flag',
          children: [
            { id: 'getting-started', title: '开始使用' }
          ]
        },
        {
          id: 'breakpoints-group',
          title: '断点功能',
          icon: 'el-icon-location-outline',
          children: [
            { id: 'breakpoints-basic', title: '断点管理' },
            { id: 'breakpoints-conditional', title: '条件断点' },
            { id: 'breakpoints-hit', title: '命中次数断点' }
          ]
        },
        {
          id: 'debugging-group',
          title: '调试功能',
          icon: 'el-icon-cpu',
          children: [
            { id: 'variables', title: '变量监视' },
            { id: 'goroutines', title: 'Goroutine 调试' },
            { id: 'callstack', title: '调用堆栈' }
          ]
        },
        {
          id: 'features-group',
          title: '其他功能',
          icon: 'el-icon-setting',
          children: [
            { id: 'history', title: '历史记录' }
          ]
        },
        {
          id: 'help-group',
          title: '帮助与支持',
          icon: 'el-icon-question',
          children: [
            { id: 'faq', title: '常见问题' },
            { id: 'tips', title: '调试技巧' },
            { id: 'troubleshooting', title: '故障排除' }
          ]
        },
        {
          id: 'about',
          title: '关于',
          icon: 'el-icon-info'
        }
      ]
    }
  },
  computed: {
    filteredSections() {
      if (!this.searchKeyword) {
        return this.sections
      }

      const keyword = this.searchKeyword.toLowerCase()
      return this.sections.filter(section => {
        // 搜索分组标题
        if (section.title.toLowerCase().includes(keyword)) {
          return true
        }

        // 搜索子项标题
        if (section.children) {
          return section.children.some(child =>
            child.title.toLowerCase().includes(keyword)
          )
        }

        return false
      })
    }
  },
  methods: {
    toggleSection(sectionId) {
      const section = this.sections.find(s => s.id === sectionId)

      if (!section.children) {
        // 没有子项，直接选中
        this.selectSection(sectionId)
      } else {
        // 有子项，切换展开状态
        const index = this.expandedSections.indexOf(sectionId)
        if (index > -1) {
          this.expandedSections.splice(index, 1)
        } else {
          this.expandedSections.push(sectionId)
        }
      }
    },

    selectSection(sectionId) {
      this.activeSection = sectionId
    }
  }
}
</script>

<style scoped>
/* 文档内容样式 */
.doc-content {
  color: #374151;
  line-height: 1.75;
}

.doc-title {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 2rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e5e7eb;
}

.doc-subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.doc-section {
  margin-bottom: 2rem;
}

.doc-section p {
  margin-bottom: 1rem;
  color: #4b5563;
}

.doc-list {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.doc-list li {
  margin-bottom: 0.5rem;
  color: #4b5563;
}

.doc-code {
  background-color: #1f2937;
  color: #e5e7eb;
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
  overflow-x: auto;
}

.doc-code pre {
  margin: 0;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
}

.doc-tip, .doc-warning {
  display: flex;
  align-items: flex-start;
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
  gap: 0.5rem;
}

.doc-tip {
  background-color: #dbeafe;
  border-left: 4px solid #3b82f6;
}

.doc-tip i {
  color: #3b82f6;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.doc-warning {
  background-color: #fef3c7;
  border-left: 4px solid #f59e0b;
}

.doc-warning i {
  color: #f59e0b;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.doc-table th,
.doc-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.doc-table th {
  background-color: #f9fafb;
  font-weight: 600;
  color: #111827;
}

.doc-table tbody tr:hover {
  background-color: #f9fafb;
}

kbd {
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-family: monospace;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

code {
  background-color: #f3f4f6;
  color: #dc2626;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-family: monospace;
  font-size: 0.875rem;
}

.doc-question {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.75rem;
}

.doc-answer {
  padding-left: 1rem;
  border-left: 3px solid #e5e7eb;
}

.doc-problem {
  background-color: #fee2e2;
  padding: 0.75rem;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
  border-left: 4px solid #ef4444;
}

.doc-solution {
  background-color: #d1fae5;
  padding: 0.75rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  border-left: 4px solid #10b981;
}

.doc-example {
  background-color: #f0f9ff;
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
  border-left: 4px solid #0ea5e9;
}

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  margin-right: 0.5rem;
}

.status-running {
  background-color: #dcfce7;
  color: #15803d;
}

.status-waiting {
  background-color: #fef3c7;
  color: #a16207;
}

.status-syscall {
  background-color: #dbeafe;
  color: #1e40af;
}

.status-idle {
  background-color: #f3f4f6;
  color: #4b5563;
}

.status-stopped {
  background-color: #fee2e2;
  color: #991b1b;
}
</style>
